<template>
  <view class="recorder"></view>
</template>

<script>
export default {
  data() {
    return {
      isUserMedia: false,
      stream: null,
      audio: null,
      recorder: null,
      chunks: [],
      startTime: 0
    };
  },
  mounted() {
    /**
     * 	error 事件的返回状态
     * 	100: 请在HTTPS环境中使用
     * 	101: 浏览器不支持
     *  201: 用户拒绝授权
     *  500: 未知错误
     * */
    if (origin.indexOf('https') === -1 && origin.indexOf('localhost') === -1 && origin.indexOf('127.0.0.1') === -1) {
      this.$emit('error', '100');
      throw '请在 https 环境中使用本插件。';
    }

    if (!navigator.mediaDevices || !window.MediaRecorder) {
      this.$emit('error', '101');
      throw '当前浏览器不支持';
    }

    this.getRecorderManager();
  },
  methods: {
    getRecorderManager() {
      this.audio = document.createElement('audio');
      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          this.isUserMedia = true;
          stream.getTracks().forEach((track) => {
            track.stop();
          });
        })
        .catch((err) => {
          this.onErrorHandler(err);
        });
    },
    start() {
      if (!this.isUserMedia) {
        console.log('设备不支持');
        return false;
      }
      // if (!this.isUserMedia) return console.log('设备不支持');

      navigator.mediaDevices
        .getUserMedia({ audio: true })
        .then((stream) => {
          this.startTime = new Date().getTime();
          this.stream = stream;
          this.recorder = new MediaRecorder(stream);
          this.recorder.ondataavailable = this.getRecordingData;
          this.recorder.onstop = this.saveRecordingData;
          this.recorder.start();
        })
        .catch((err) => {
          this.onErrorHandler(err);
        });
    },
    stop() {
      this.recorder?.stop();
      this.stream?.getTracks().forEach((track) => {
        track.stop();
      });
    },
    getRecordingData(e) {
      this.chunks.push(e.data);
    },
    saveRecordingData() {
      const blob = new Blob(this.chunks, { type: 'audio/mpeg' }),
        localUrl = URL.createObjectURL(blob);
      this.chunks = [];
      const endTime = new Date().getTime();

      let duration = (endTime - this.startTime).toString().split('');
      duration.splice(duration.length - 2);
      duration.splice(duration.length - 1, 0, '.');
      duration = parseFloat(duration.join(''));

      const recorder = {
        data: blob,
        duration: duration,
        localUrl: localUrl
      };
      this.$emit('success', recorder);
    },
    onErrorHandler(err) {
      console.log(err);
      if (err.name === 'NotAllowedError') {
        this.$emit('error', '201');
        throw '用户拒绝了当前的浏览器实例的访问请求';
      }

      if (err.name === 'NotReadableError') {
        this.$emit('error', '101');
        throw '当前浏览器不支持';
      }

      this.$emit('error', '500');
      throw '调用失败，原因不详';
    }
  },
  destroyed() {
    this.stop();
  }
};
</script>
<style lang="scss"></style>